<template>
  <div class="addrlist box bg">
    <div class="backbox">
      <img
        src="@/assets/img/back.png"
        class="goback"
        @click="$router.replace({ path: '/index', query: { intxt: 'back' } })"
      />
    </div>
    <img
      src="@/assets/img/btn_scenic.png"
      class="storetosenic"
      @click="$router.replace('/sceniclist')"
    />
    <div class="addrcontainer">
      <div class="addrinfobox">
        <div class="headcont">
          <span class="filtertitle">筛选：</span>
          <div class="filteropt">
            <div class="item" @click="filterType('baoyang')">
              <div class="choosebox">
                <img src="@/assets/img/gou.png" v-show="baoyangshow" />
              </div>
              <span>保养</span>
            </div>
            <div class="item" @click="filterType('zhusu')">
              <div class="choosebox">
                <img src="@/assets/img/gou.png" v-show="zhusushow" />
              </div>
              <span>住宿</span>
            </div>
            <div class="item" @click="filterType('canyin')">
              <div class="choosebox">
                <img src="@/assets/img/gou.png" v-show="canyinshow" />
              </div>
              <span>餐饮</span>
            </div>
          </div>
        </div>
        <hr class="hr hr1" />
        <hr class="hr hr2" />
        <div class="addrcont" v-if="storeList">
          <div
            class="ditem clmstart"
            v-for="item in storeList"
            :key="item.id"
            @click="
              $router.replace({ name: 'addrinfo', params: { id: item.id } })
            "
          >
            <div class="imgbox">
              <img v-lazy="item.poster_url" />
            </div>
            <div class="addrnamebox">{{ item.city }}：{{ item.name }}</div>
          </div>
        </div>
        <p class="notips" v-show="!endflag" @click="loadMore">加载更多</p>
        <p class="notips" v-show="endflag">没有更多了</p>
      </div>
    </div>
  </div>
</template>
<script>
import { Toast } from "vant";
export default {
  data() {
    return {
      baoyangshow: false,
      zhusushow: false,
      canyinshow: false,
      storeList: [
        // {
        //   id: "15",
        //   city: "上海",
        //   name: "abcd",
        //   poster_url:
        //     "http://dove-2021.oss-cn-shanghai.aliyuncs.com/20230419174554892278.jpeg?x-oss-process=image/resize,h_327,m_lfit",
        //   tag: ["保养"],
        // },
        // {
        //   id: "16",
        //   city: "左贡",
        //   name: "鹰志摩旅酒店",
        //   poster_url:
        //     "http://dove-2021.oss-cn-shanghai.aliyuncs.com/20230419175132644169.jpeg?x-oss-process=image/resize,h_327,m_lfit",
        //   tag: ["保养", "住宿", "餐饮"],
        // },
        // {
        //   id: "17",
        //   city: "八宿",
        //   name: "八宿摩旅接待站",
        //   poster_url:
        //     "http://dove-2021.oss-cn-shanghai.aliyuncs.com/20230419180542210696.jpeg?x-oss-process=image/resize,h_327,m_lfit",
        //   tag: ["保养", "住宿"],
        // },
      ],
      alllist: [], //所有门店
      tag: [],
      pindex: 1, //页码
      endflag: false, //数据加载完毕
      total: 0, //总数据量
    };
  },
  created() {
    this.alllist = this.$store.state.storeAlllist;
    this.storeList = this.alllist;
    if (this.alllist.length <= 0) {
      this.getAllStoreList();
    }
  },
  methods: {
    filterType(val) {
      if (val == "baoyang") {
        if (this.baoyangshow) {
          this.baoyangshow = false;
          this.tag = this.tag.filter((item) => item != "保养");
        } else {
          this.baoyangshow = true;
          this.tag.push("保养");
        }
      }
      if (val == "zhusu") {
        if (this.zhusushow) {
          this.zhusushow = false;
          this.tag = this.tag.filter((item) => item != "住宿");
        } else {
          this.zhusushow = true;
          this.tag.push("住宿");
        }
      }
      if (val == "canyin") {
        if (this.canyinshow) {
          this.canyinshow = false;
          this.tag = this.tag.filter((item) => item != "餐饮");
        } else {
          this.canyinshow = true;
          this.tag.push("餐饮");
        }
      }
      //筛选门店
      if (this.tag.length <= 0) {
        //如果没有选择筛选类型，则显示全部门店列表
        this.storeList = this.alllist;
      } else {
        this.storeList = [];
        //根据用户选择的门店类型，筛选门店
        for (let i = 0; i < this.alllist.length; i++) {
          let flag = this.isContained(this.alllist[i].tag, this.tag);
          if (flag) {
            this.storeList.push(this.alllist[i]);
          }
        }
      }
    },
    //判断一个数组是否包含了另一个数组的全部元素
    isContained(a, b) {
      // a和b其中一个不是数组，直接返回false
      if (!(a instanceof Array) || !(b instanceof Array)) return false;
      const len = b.length;
      // a的长度小于b的长度，直接返回false
      if (a.length < len) return false;
      for (let i = 0; i < len; i++) {
        // 遍历b中的元素，遇到a没有包含某个元素的，直接返回false
        if (!a.includes(b[i])) return false;
      }
      // 遍历结束，返回true
      return true;
    },
    //加载更多
    loadMore() {
      this.pindex++;
      this.getAllStoreList();
      this.baoyangshow = false;
      this.zhusushow = false;
      this.canyinshow = false;
      this.tag = [];
    },
    //获取门店列表
    getAllStoreList() {
      Toast.loading({
        message: "loading...",
        forbidClick: true,
        duration: 0, //值为 0 时，toast 不会消失
        overlay: true, //是否显示背景遮罩层
      });
      this.$http
        .post("/getAllCheckInStoreInfo", { page: this.pindex })
        .then((res) => {
          Toast.clear();
          if (res.data.code == 200) {
            this.alllist = this.alllist.concat(res.data.data.lists);
            this.total = res.data.data.total;
            if (this.alllist.length >= this.total) {
              this.endflag = true;
            }
            this.storeList = this.alllist;
            this.$store.commit("updateStoreList", this.alllist);
          } else {
            Toast(res.data.msg);
          }
        });
    },
  },
};
</script>
<style lang="less" scoped>
.addrlist {
  overflow-y: scroll;
  .backbox {
    top: 3rem;
  }
  .storetosenic {
    position: absolute;
    top: 3rem;
    right: 2rem;
  }
  .addrcontainer {
    position: relative;
    width: 100%;
    height: auto;
    margin-top: 11rem;
    .headcont {
      width: 91.7%;
      margin: 0 auto;
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 2rem;
      font-family: "AlibabaPuHuiTi-2-85-Bold";
      .filteropt {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        .item {
          margin-left: 1rem;
          display: flex;
          align-items: center;
          .choosebox {
            position: relative;
            width: 29px;
            height: 29px;
            border: 2px solid #195191;
            box-sizing: border-box;
            margin-right: 0.5rem;
            img {
              width: 38px;
              margin-top: -0.5rem;
            }
          }
        }
      }
    }
    .hr {
      width: 91.7%;
      height: 5px;
      background: #db101a;
      border: 0;
      border-style: none;
      margin-top: 0.5rem;
    }
    .hr2 {
      height: 3px;
      margin-top: 0;
    }
    .addrinfobox {
      position: relative;
      margin: 0 auto;
      .addrcont {
        position: relative;
        height: auto;
        margin: 2rem 0.5rem 0 1.8rem;
        // display: grid;
        // grid-template-rows: repeat(auto-fill, 412px);
        // grid-template-columns: repeat(2, 325px);
        // place-content: start start;
        // gap: 2rem 1rem;
        display: flex;
        flex-flow: row wrap;
        justify-content: space-between;
        align-items: flex-start;
        .ditem {
          position: relative;
          width: 354px;
          height: 358px;
          background: url("@/assets/img/addrbox.png") no-repeat;
          background-size: 100% 100%;
          margin-bottom: 1rem;
          .imgbox {
            width: 300px;
            height: 270px;
            margin-top: 1rem;
            margin-right: 1.5rem;
            border-radius: 1rem;
            overflow: hidden;
            background-color: #ffffff;
            img {
              width: 100%;
              height: 100%;
              object-fit: cover;
            }
          }
          .addrnamebox {
            position: relative;
            width: 280px;
            height: 40px;
            margin-top: 1.2rem;
            margin-left: 1rem;
            overflow: hidden;
            text-align: center;
            font-size: 1.2rem;
            color: #ffffff;
            line-height: 40px;
          }
        }
      }
      .notips {
        font-size: 1.3rem;
        color: #5e5e5e;
        text-align: center;
        padding-bottom: 6rem;
      }
    }
  }
}
</style>
